<template>
  <div class="fnav">
    <router-view></router-view>
   <router-link to="/">首页，计数器组件{{count}}</router-link>
    <router-link to="/vuexc">虚拟用户管理组件</router-link>
    <router-link to="/login">登录组件</router-link>
    <a href="#">在线游客: {{out}}</a>
    <a href="#">在线总人数:{{allNum}}</a>
    <router-link to="/login" v-if="isLogin" class="login">已登陆</router-link>
    <router-link to="/login" v-else class="login">未登录</router-link>

 </div>
  </template>
  <script>
  import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
  export default {
    name: 'fnav',
    computed:{
      //一次性定义多个计算属性，计算属性都来源于Vuex的state
    ...mapState([
       'isLogin',
       'in',
       'out',
       'loginNum',
       'count'
    ]),
    //mapState和mapGetters的语法结构相同，给出了常用的两种定义的语法
    ...mapGetters({
      allNum: 'allNum'
     })
   }
  }
  </script>
<style scoped>
     .fnav{
       display:flex;
       padding:20px 5%;
       line-height:36px;
       text-align:center;

     }
     .fnav a{
       width:50%;
       text-decoration: none;
       margin:5px;
       background-color:#039;
        font-size:16px;
        color:#fff;}
     .fnav>.login{
       flex-shrink:0;
       width:80px;
       font-size:14px;
       background-color:#333;
       margin-left:10px;
        color:#fff;
        line-height:30px;
        height:36px;
        border-radius: 20px;
     }
  </style>
